<template>
	<div id="feedback" class="panel feedback">
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>关于
				</button>
			<h1 class="mui-center mui-title">问题反馈</h1>
		</div>
		<div class="mui-content">
			<div class="mui-margin-top">
				<p>问题和意见</p>
				<div class="row mui-input-row">
					<textarea id="question" class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
				</div>
				<p>图片(选填,提供问题截图)</p>
				<div id="image-list" class="row image-list">
					<div class="image-item space">
						<div class="image-close">X</div><input type="file" accept="image/*" id="image-1"></div>
				</div>
				<p>QQ/邮箱</p>
				<div class="mui-input-row">
					<input id="contact" type="text" class="mui-input-clear  contact" placeholder="(选填,方便我们联系你 )" data-input-clear="19"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
				<div class="mui-content-padded">
					<button id="submit" type="button" class="mui-btn mui-btn-green mui-btn-block">提交</button>
				</div>
				<p>此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客服面板” 能够查阅反馈信息。</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "feedback",
		data() {
			return {}
		}
	}
</script>

<style scoped>
	#feedback .mui-popover {
		position: fixed;
	}
	
	#feedback .mui-table-view:last-child {
		margin-bottom: 0px;
	}
	
	#feedback .mui-table-view:first-child {
		margin-top: 0px;
	}
	
	.feedback .image-item.space .image-close {
		display: none;
	}
	
	.feedback .image-item.space {
		border: none;
	}
	
	.feedback .image-list {
		width: 100%;
		height: 85px;
		background-size: cover;
		background-color: #FFFFFF;
		padding: 10px 10px;
		overflow: hidden;
	}
	
	.feedback .image-item {
		width: 65px;
		height: 65px;
		background-image: url(http://www.dcloud.io/hellomui/images/iconfont-tianjia.png);
		background-size: 100% 100%;
		display: inline-block;
		position: relative;
		border-radius: 5px;
		margin-right: 10px;
		margin-bottom: 10px;
		border: solid 1px #e8e8e8;
	}
	
	.feedback .image-item .image-close {
		position: absolute;
		display: inline-block;
		right: -6px;
		top: -6px;
		width: 20px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		border-radius: 12px;
		background-color: #FF5053;
		color: #f3f3f3;
		border: solid 1px #FF5053;
		font-size: 9px;
		font-weight: 200;
		z-index: 1;
	}
	
	.feedback .image-item input[type="file"] {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
		z-index: 0;
	}
	
	p {
		padding-left: 10px;
	}
</style>